<template>
  <div :key="propkey" style="width: 100%; height: 100%;">
    <div ref="pie" class="pie" />
  </div>
</template>

<script>
export default {
  name: 'ChartPie',
  props: {
    propkey: {
      type: String,
      default: 'pie'
    },
    id: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      options: {
        title: {
          text: '',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              // { value: 1048, name: 'Search Engine' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(val) {
        if (!val.length) {
          return
        }
        this.$set(this.options.series[0], 'data', val)
        // console.log(document.querySelector('.pie'))
        const id = this.id
        // document.querySelector('.pie').setAttribute('id', id)
        this.$refs.pie.setAttribute('id', id)
        const chartDom = document.getElementById(id)
        const myChart = this.$echarts.init(chartDom)
        myChart.setOption(this.options)
      }
    }
  }
}
</script>

<style>
.pie {
  width: 100%;
  height: 100%;
}
</style>
